<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	

	<script src="slider.js"></script>
	<script src="plantGarden.js"></script>
	<script src="graph.js"></script>
	<script src="cale.js"></script>
	<script src="tabs.js"></script>
	<script src="treegraph.js"></script>

	<link rel="stylesheet" type="text/css" href="style.css">

	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

	<script>
	var list = new Array();

	site=new Object();
	site.lenght=10;
	site.width=15;
	site.zone=8;
	site.ph={name:"PH",value:6,units:"ph",min:0, max: 14, step:.1};
	site.rainfall=20;
	site.irragate={name:"Irrigation",value:20,units:"days/inch",min:0, max: 80, step:1};
	site.shade={name:"Sunshine",value:5,units:"",min:1, max: 5, step:.25};
	site.earlySeed=new Date(2012, 1, 24);
	site.lateSeed=new Date(2012, 3, 9);
	site.earlyHarden=new Date(2012, 2, 21);
	site.lateHarden=new Date(2012, 4, 1);
	site.earlyPlant=new Date(2012, 3, 5);
	site.latePlant=new Date(2012, 8, 17);
	site.harvestEarly=new Date(2012, 8, 7);
	site.harvestLate=new Date(2012, 9, 17);
	site.phos=35;
	site.nit=25;
	site.pot=30;

	var allList = new Array();
	var recipeList = new Array();
	var listname = new Array();
	
	function createAdd(){
		for(var i=0;i<allList.length;i++)
			listname.push(allList[i].name);
		$( "#tags" ).autocomplete({
			source: listname
		});
	}
	
	function goSubmit(e) {
		if (e.keyCode == 13) {
			var tempname = document.getElementById("tags").value;
			for(var i=0;i<allList.length;i++){
				if(allList[i].name==tempname){
					addPlant(allList[i].id);
					return;
				}	
			}
		}
	}
	
	function handleChange(tab,object) {
		//Plants Explorer
		if(tab=="petrue" && !object.checked)
			dataChanged(list);
		else if(tab=="petrue")
			dataChanged(allList);
	}
	
    

	</script>
</head>
<body>

<div id="container">

	<div id = "left">
		<div id = "center">
			Plants
			<div class="ui-widget">
				<label for="tags">Add: </label>
				<input id="tags" onkeypress="goSubmit(event)"/>
			</div>
			<div id="vegList">
				<script>
					drawList();
					//addPlant(35);
					//addPlant(58);
					//addPlant(43);
					//addPlant(15);
					//addPlant(20);
					//deletPlant(1);
					//calculateHealth();				
				</script>
			</div>
			<div id="vegSelect">
			</div>
		</div>
		
		<div id = "topright">
				Conditions
				<div id="siteList"></div>
				
				<div style="float:left; position:relative; width: 30%"><script>makeSliderObj(window.site.ph);</script></div>
				<div style="float:left"><script>makeSliderObj(window.site.irragate);</script></div>
				<div style="float:left; position:relative; width: 30%"><script>makeSliderObj(window.site.shade);</script></div>
				<script>//cale();</script>	
				<br />
				Hardiness Zone <input id="zone" type="text" size="3"/><br /> Average Annual Rainfall <input id="rain" type="text" size="3"/>
				<script>
				document.getElementById('zone').value = site.zone;
				document.getElementById('zone').onchange=function(){site.zone = document.getElementById('zone').value;};
				document.getElementById('rain').value = site.rainfall;
				document.getElementById('rain').onchange=function(){site.rainfall = document.getElementById('rain').value;}
				</script>
				
		</div>
	</div>

	<div id = "right">
		
		
		<div id = "botright" class="tabcontainer">
			<div class="tab_nav">
				<ul>
					<li id="navtab_tab1" class="active"><a href="javascript:simple_tab('tab1')">Plant Explorer</a>
					<div class="tabcheck">
					<input type="checkbox" name="petrue" checked="checked" value="true" onchange='handleChange(this.name,this);'>Show All Plants
					</div>
					</li>
					<li id="navtab_tab2"><a href="javascript:simple_tab('tab2')">Companion Explorer</a>
					
					</li>
					<li id="navtab_tab3"><a href="javascript:simple_tab('tab3')">Similarity Graph</a>
					
					</li>
				</ul>
			</div>
	
			<div id="tab_tab1" class="tab">
				
			</div>

			<div id="tab_tab2" class="tab" style="display:none;">
				<div id="forcegraphcircle">			
					<script>
					getPlantInfo(foGraCircle, window.allList, foGra, window.allList);					
					</script>
				</div>
			</div>

			<div id="tab_tab3" class="tab" style="display:none;">
				<div id="forcegraph">		
	
				</div>
			</div>
	</div>
</div>
</div>

</body>
</html>

